<template>
  <div>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="8" v-for="item in lunbo" :key="item.id">
          <el-card style="height: 255px">
            <el-image
              :src="'http://cms.xiaopangbupang.top:5000/' + item.url"
              fit="scale-down"
            ></el-image>
            <br />
            <span
              style="font-size: 15px; font-family: 幼圆; font-weight: bold"
            ></span>
            <div id="class">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="small"
                plain
                @click="AddPictureBot(item.id)"
                >{{ item.lunboname }}</el-button
              >
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog title="轮播图片修改" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <div id="upload">
          <label class="el-form-item__label" style="width: 80px"
            >上传图片</label
          >
          <!--elementui的上传图片的upload组件-->
          <el-upload
            ref="upload"
            class="upload-demo"
            drag
            action="#"
            accept="image/png,image/gif,image/jpg,image/jpeg"
            :limit="1"
            multiple
            :auto-upload="false"
            :http-request="uploadPicture"
            :before-upload="uploadIfFrom"
            :on-exceed="maxFile"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过2M
            </div>
          </el-upload>
        </div>

        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { AddPicture, selPicture } from "../../api/picture";
export default {
  data() {
    return {
      lunbo: [
        {
          id: 1,
          url: "",
          lunboname: "轮播图一",
        },
        {
          id: 2,
          url: "",
          lunboname: "轮播图二",
        },
        {
          id: 3,
          url: "",
          lunboname: "轮播图三",
        },
        {
          id: 4,
          url: "",
          lunboname: "轮播图四",
        },
        {
          id: 5,
          url: "",
          lunboname: "轮播图五",
        },
        {
          id: 6,
          url: "",
          lunboname: "轮播图六",
        },
      ],
      // 点击按钮的Id
      pictureId: "",

      dialogImageUrl: "",
      dialogVisible: false,
      dialogFormVisible: false,
      formData: {
        id: "",
      },
    };
  },

  // provide / inject（注入依赖） 组合刷新页面
  // inject: ["reload"],

  mounted() {
    this.lunbotu();
  },

  methods: {
    lunbotu() {
      selPicture()
        .then((data) => {
          console.log(data.data);
          this.lunbo[0].url = data.data.pictureOne.picture;
          this.lunbo[1].url = data.data.pictureTwo.picture;
          this.lunbo[2].url = data.data.pictureThree.picture;
          this.lunbo[3].url = data.data.pictureFour.picture;
          this.lunbo[4].url = data.data.pictureFive.picture;
          this.lunbo[5].url = data.data.pictureSix.picture;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取点击的按钮Id
    AddPictureBot(id) {
      this.pictureId = id;
      this.dialogFormVisible = true;
    },
    uploadPicture(file) {
      // 获取file中的文件file
      var fileObj = file.file;
      var fileFrom = new FormData();
      //   将fileObj存入FormData中
      fileFrom.append("pictureFile", fileObj);
      //将用户数据存入FormData中
      fileFrom.append("pictureType", this.pictureId);
      AddPicture(fileFrom)
        .then((data) => {
          console.log(data);
          // 清空图片
          // this.$refs.upload.clearFiles();
          this.dialogFormVisible = false;
          // 刷新页面
          location.reload();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //   文件超出最大上传数时的钩子
    maxFile() {
      this.$notify.error({
        title: "错误",
        message: "超出最大上传文件数咯",
      });
    },
    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    uploadIfFrom(file) {
      console.log("before");

      if (
        !(
          file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg"
        )
      ) {
        this.$notify.error({
          title: "错误",
          message:
            "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
        });
        return false;
      }

      let size = file.size / 1024 / 1024 < 2;
      if (!size) {
        this.$notify.error({
          title: "错误",
          message: "图片大小必须小于2M",
        });
        return false;
      }
    },
    // 手动点击提交按钮触发
    handleSave() {
      // 判断轮播图封面图片是否为空
      if (this.$refs.upload.uploadFiles.length > 0) {
        this.$refs.upload.submit();
      } else {
        this.$notify.error({
          title: "错误",
          message: "请上传轮播图封面图!",
        });
      }
    },
  },
};
</script>

<style scoped>
.el-card {
  margin-bottom: 10px;
}
.el-image {
  height: 230px;
}

.ranking {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 13px;
}
.rankingA {
  display: flex;
}
#class {
  text-align: center;
}
</style>